<template>
  <div class="homeChart">
    <el-card shadow="never" class="cardNav">
      <template #header>
        <div class="cardHeader">
          <div class="cardTitle">订单统计</div>
          <div class="cardCheck">
            <el-check-tag
              class="checkTag"
              v-for="(item, index) in options"
              :key="index"
              :checked="chartType == item.value"
              @click="handleCheck(item.value)"
              >{{ item.title }}
            </el-check-tag>
          </div>
        </div>
      </template>
      <div id="homeChart" class="chartContent" ref="homeChartRef"></div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted,onBeforeUnmount, ref, reactive } from "vue";
import api from "@/api/statistic";
import * as echarts from "echarts";
import { useResizeObserver } from "@vueuse/core";

const chartType = ref("month");

const props = defineProps({
  options: {
    type: Array,
    default: () => [
      {
        title: "近1个月",
        value: "month",
      },
      {
        title: "近1周",
        value: "week",
      },
      {
        title: "近24小时",
        value: "hour",
      },
    ],
  },
});

const handleCheck = (item) => {
  console.log("value: ", item);
  chartType.value = item;
  getHomeChartData(item);
};

var homeChart = null;
//视图尺寸变换，更新echarts
const homeChartRef=ref(null)
//echarts配置
let option = null;
//获取echarts配置
function getHomeChartOption() {
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: [],
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "订单量",
        type: "bar",
        barWidth: "60%",
        data: [],
      },
    ],
  };
  getHomeChartData(chartType.value);
  
}
//获取echarts数据
function getHomeChartData(chartType){
  homeChart.showLoading();
  api.getChartStatistic(chartType).then((res) => {
    console.log("res: ", res);
  }).catch((err) => {
    console.log("err: ", err);
  }).finally(() => {
    homeChart.hideLoading();
  });

  option.xAxis[0].data = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
  option.series[0].data = [820, 932, 901, 934, 1290, 1330, 1320];
  //渲染图表
  option && homeChart.setOption(option);
}

//监听视图尺寸变化
useResizeObserver(homeChartRef,(entity)=>{
  const entry=entity[0];
  console.log("entry: ", entry);
  const {width,height}=entry.contentRect;
  console.log("width: ", width, "height: ", height);
  
  homeChart && homeChart.resize();
})

onMounted(() => {
  var chartDom = document.getElementById("homeChart");
  if(chartDom){
    homeChart = echarts.init(chartDom);
    getHomeChartOption();
  }
  
});

onBeforeUnmount(()=>{
  //销毁echarts实例
  if(homeChart) homeChart.dispose();
})

//页面销毁之前，需要销毁echarts实例

</script>

<style lang="scss" scoped>
@use "@/common";
.homeChart {
  // height: 45.5vh;
  .cardHeader {
    @apply flex justify-between;
    .cardTitle {
    }
    .cardCheck {
      .checkTag {
        @apply ml-2;
      }
    }
  }
  .chartContent {
    width: 100%;
    min-height: 34.5vh;
  }
}
</style>